<template>
  <div id="login_app">
      <div class="login_card">
          <h3>小U商城后台管理系统</h3>
          <el-form 
          :model="LoginForm" 
          :rules="rules" 
          ref="LoginFormRef" 
          >
            <el-form-item prop="username">
                <el-input placeholder="用户名" v-model="LoginForm.username">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="密码" v-model="LoginForm.password">
                    <template slot="prepend">
                        <i class="el-icon-lock"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('LoginFormRef')">提交</el-button>
            </el-form-item>
          </el-form>
      </div>    
  </div>    
</template>

<script>
export default {
    data() {
      return {
        LoginForm: {
          username: 'admin',
          password: 'admin888',
        },
        rules: {
          username: {
              required:true, message:"用户名不可以为空", trigger: 'blur' 
          },
          password: {
              required:true, message:"密码不可以为空", trigger: 'blur', 
          }
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              var login_url = "http://127.0.0.1:3000/api/userlogin"
              this.LoginForm
              this.$http.post(login_url,this.LoginForm).then(
                  res=>{
                      if(res.status === 200){
                          localStorage.setItem("userData",JSON.stringify(res.data.list))
                          this.$router.push("/")  
                      }
                      
                  }
              )
          } else {
             console.log(valid) 
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
    #login_app{
        background: url('../../build/image/loginbg.jpeg');
        width: 100%;
        height: 100vh;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login_card{
        width: 400px;
        height: 300px;
        background: #FFF;
        padding: 0 40px;
    }
    .login_card>h3{
        color: #409eff;
        text-align: center;
        margin-top: 40px;
    }
    .el-button{
        width: 100%;
    }
    .el-form-item{
        margin-top: 20px;
    }
</style>